import {Button, message as antdMessage, Space} from "antd";
import {CopyOutlined, FrownOutlined, MutedOutlined, SmileOutlined, SoundOutlined} from "@ant-design/icons";
import {BubbleContent, OpType, RedirectDifyReq} from "../types/CommonTypes";
import {difyHttpRedirect} from "../ComReq";
import React from "react";

const MsgOperate: React.FC<BubbleContent> = ({msg,msgId, opTypes}) =>{
    const [soundIng,setSoundIng] = React.useState<boolean>(false);
    const like = opTypes?.includes(OpType.like);
    const dislike = opTypes?.includes(OpType.dislike);
    const copy = opTypes?.includes(OpType.copy);
    const read = opTypes?.includes(OpType.read);
    if (!opTypes || !opTypes.length) {
        return "";
    }
    // 复制文本
    const copyToClipboard = (text: string) => {
        // console.log(text);
        navigator.clipboard.writeText(text)
            .then(() => {
                antdMessage.success('内容已复制！');
            })
            .catch(() => {
                antdMessage.error('内容复制失败');
            });
    };
    // 播放(read aloud)
    const readAloud = (text: string) => {
        text.replace("#","");
        const utterance = new SpeechSynthesisUtterance(text);
        window.speechSynthesis.speak(utterance);
        setSoundIng(true);
        antdMessage.info('正在播放中');
        utterance.onend=()=>{
            antdMessage.info('播放已完成');
            setSoundIng(false);
        }
    };
    const cancelReadAloud = () => {
        window.speechSynthesis.cancel();
        setSoundIng(false);
        antdMessage.info('已取消播放');
    };
    // 点赞/点踩
    const handleLike = (msgId: number | string) => {
        const difyReq: RedirectDifyReq = {
            difyUrl: "/messages/" + msgId + "/feedbacks",
            method: "POST",
            difyReqBody: {
                rating:"like",
                content:"like"
            },
        }
        difyHttpRedirect(difyReq).then(()=>{
            antdMessage.success('感谢您的支持');
        }).catch(err=>{
            antdMessage.error(err);
        });
    };
    const handleDislike = (msgId: number | string) => {
        const difyReq: RedirectDifyReq = {
            difyUrl: "/messages/" + msgId + "/feedbacks",
            method: "POST",
            difyReqBody: {
                rating:"dislike",
                content:"dislike"
            },
        }
        difyHttpRedirect(difyReq).then(()=>{
            antdMessage.success('感谢您的反馈');
        }).catch(err=>{
            antdMessage.error(err);
        });
    };
    return (
        <>
            <Space style={{marginTop: 8}}>
                <Button
                    variant="outlined"
                    color="green"
                    title="赞一下"
                    style={{ display: like?"inline-block":"none" }}
                    icon={<SmileOutlined/>}
                    onClick={() => handleLike(msgId)}
                />
                <Button
                    variant="text"
                    title="踩一下"
                    style={{ display: dislike?"inline-block":"none" }}
                    icon={<FrownOutlined/>}
                    onClick={() => handleDislike(msgId)}
                />
                <Button
                    variant="dashed"
                    color="gold"
                    title="停止播放"
                    style={{ display: read && soundIng?"inline-block":"none" }}
                    icon={<MutedOutlined/>}
                    onClick={() => cancelReadAloud()}
                />
                <Button
                    variant="outlined"
                    color="blue"
                    title="播放"
                    style={{ display: read && !soundIng?"inline-block":"none" }}
                    icon={<SoundOutlined/>}
                    onClick={() => readAloud(msg)}
                />
                <Button
                    type="text"
                    variant="filled"
                    color="blue"
                    title="复制"
                    style={{ display: copy?"inline-block":"none" }}
                    icon={<CopyOutlined/>}
                    onClick={() => copyToClipboard(msg)}
                />
            </Space>
        </>
    );
}

export default MsgOperate;
